<template>
  <view class="steps">
    <view
      class="list"
      v-for="(item, index) in stepList"
      :key="index"
      :class="{ 'lase-list': index == stepList.length - 1 }"
      :style="{ width: `${100 / (stepList.length - 1)}%` }"
    >
      <view
        class="step-icon"
        :class="{ 'current-node': current >= index + 1 }"
        >{{ index + 1 }}</view
      >
      <view
        class="step-line"
        :class="{ 'current-line': current > index + 1 }"
        v-if="index != stepList.length - 1"
      ></view>
      <view
        class="step-title"
        :class="{
          'last-title': index == stepList.length - 1,
          'current-title': current > index,
        }"
      >
        {{ item.statusName }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    stepList: {
      type: Array,
      default: [],
    },
    current: {
      type: Number,
      default: 1,
    },
  },
};
</script>
<style lang="scss" scoped>
.steps {
  padding: 0 88rpx 0 40rpx;
  display: flex;
  justify-content: flex-start;
  height: 220rpx;
  background: #457ef6;
  position: relative;
  .list {
    position: relative;
    margin-top: 50rpx;
    .step-icon {
      width: 76rpx;
      height: 76rpx;
      background: #457ef6;
      border: 2rpx solid #ffffff;
      border-radius: 76rpx;
      font-size: 48rpx;
      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
      font-weight: 500;
      color: #ffffff;
      line-height: 76rpx;
      text-align: center;
      z-index: 10;
      position: absolute;
    }
    .current-node {
      background: #fff;
      color: #457ef6;
    }
    .icon-finish {
      z-index: 1;
    }
    .step-line {
      position: absolute;
      top: 40rpx;
      left: 70rpx;
      width: calc(100% - 30rpx);
      height: 3rpx;
      z-index: 0;
      background: rgba(255, 255, 255, 0.4);
    }
    .current-line {
      background: #fff;
    }
    .lase-node {
      display: none;
    }
    .step-title {
      position: absolute;
      left: -7%;
      top: 100rpx;
      font-style: normal;
      font-size: 24rpx;
      text-align: center;
      font-size: 28rpx;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
    }
    .current-title {
      color: #fff;
      font-weight: 500;
    }
    .last-title {
      width: 100rpx;
      left: -6rpx;
    }
  }
  .lase-list {
    width: 24rpx !important;
  }
}
</style>
